<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES5 传统的对象取值   => 依次取出对象中的每个值 赋值给变量
    // var zhang = {
    //     name: "张三",
    //     age: 18,
    //     height: "173cm",
    //     weight: "70kg",
    // }

    // var name = zhang.name;
    // var age = zhang.age;
    // var height = zhang.height;
    // var weight = zhang.weight;


    // ES6 解构赋值
    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

    // 对象解构  => 对应键名解构

    var zhang = {
        name: "张三",
        age: 18,
        height: "173cm",
        weight: "70kg",
    }

    // var { } = zhang;
    // (1)  直接对应键名解构   => 键名对应变量名
    var { name, age, height, weight } = { name: "张三", age: 18, height: "173cm", weight: "70kg" };

    // 等价于
    var { name: name, age: age, height: height, weight: weight } = { name: "张三", age: 18, height: "173cm", weight: "70kg" };
    console.log(name, age, height, weight);


    // (2) 自定义变量名
    // a. 属性名是关键词  => 不能作为变量名
    // b. 如果变量名已被使用 => 自定义一个新的变量名
    // var { name: a, age: b, height: c, weight: d } = { name: "张三", age: 18, height: "173cm", weight: "70kg" };
    // console.log(a, b, c, d);


    var { name: name, age: age, class: _class, "is-study": isStudy, height: height, weight: weight } = {
        name: "张三",
        age: 18,
        class: "2213",  // class作为对象的属性名
        "is-study": true,  // "a-b"作为对象的属性名
        height: "173cm",
        weight: "70kg"
    };
    console.log(name, age, _class, isStudy, height, weight);












</script>

</html>